<template>
    <div>
        <div class="topBtn">
            <div class="sizeBig"><span>消息中心</span></div>
            <div>
                <el-button type="primary" @click="reading"><i class="iconfont icon-addNew"></i>标记已读</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="deletion">删除</el-button>
            </div>
        </div>
        <div class="message">
            <p class="character">1.系统自动发送消息通知用户以及管理员手动发送消息给用户的告知都会在消息中心存档，方便用户点击查看。 <span class="skip">查看帮助文档</span></p>
        </div>
        <div class="inputcontent">
            <el-input v-model="search" placeholder="请输入内容" class="inSearch"></el-input>
            <div class="iconSearch"></div>
        </div>
        <div class="tablesize">
            <Table :reset="reset" v-on:getId="getListId"></Table>
        </div>
         <div class="block">
            <el-pagination
            :page-sizes="[10,20,50,100]"
            :page-size="10"
             @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination> 
        </div>
    </div>
</template>

<script>
import Table from './components/newsTable'
import operation from '@/mixins/operation'
import {delay} from '@/utils/autoSearch'
import {read,deletionMessage} from '@/api/news'

export default {
    name:'userControl',
    mixins:[operation],
    components:{
        Table
    },
    data(){
        return{
            module:'news',    //online数据请求
            search:'',   //搜索条件
            UserID:[],   //勾选的id
            setpage:'', //当前页
        }
    },
    watch: {
        //用来监听页面变量的改变
        //监听搜索，300ms执行一次fetchData方法（去搜索）
        search() {
            delay(() => {
                this.fetchData();
            }, 300);
        }
    },
    methods:{
        // 自动搜索的方法
        async fetchData(val){
            this.initialize({keyName:this.search,userId:this.userId,page:1,pageSize:10})
        },
        handleCurrentChange(val){
            this.setpage=val
            this.initialize({keyName:this.search,userId:this.userId,isDelete:0,page:this.setpage,pageSize:10})
        },
        getListId(data){
            this.UserID=data
        },
        reading(){
            if(this.UserID.length==0){
                this.$message({
                    message: '请勾选已读的消息',
                    type: 'warning'
                    });
            }else{
                let listid=''
                this.UserID.forEach(el => {
                    listid+=el+','
                });
                listid=listid.substr(0,listid.length-1)
                read({strHid:listid}).then((res)=>{
                    this.initialize({keyName:this.search,userId:this.userId,isDelete:0,page:this.setpage,pageSize:10})
                }).catch((error)=>{
                    console.log(error)
                })
            }
        },
        deletion(){
            if(this.UserID.length==0){
                this.$message({
                    message: '请勾选需要删除的消息',
                    type: 'warning'
                    });
            }else{
                let listid=''
                this.UserID.forEach(el => {
                    listid+=el+','
                });
                listid=listid.substr(0,listid.length-1)
                deletionMessage({strHid:listid}).then((res)=>{
                    this.$message({
                        message: res.Message,
                        type: 'success'
                        });
                    this.initialize({keyName:this.search,userId:this.userId,isDelete:0,page:this.setpage,pageSize:10})
                }).catch((error)=>{
                    console.log(error)
                })
            }
        }
    },
    created(){
        this.userId=JSON.parse(localStorage.getItem('getInfo')).UserID
        this.initialize({keyName:this.search,userId:this.userId,isDelete:0,page:1,pageSize:10})
    }   
}
</script>

<style lang="scss" scoped>
.sizeBig{
    font-size: 16px;
}
.topBtn{
    height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
}
.message{
    width:98%;
    margin: 0 auto;
    height:60px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(238,238,238,1);
    font-size:14px;
    .character{
        margin: 20px 0 21px 20px;
        color:#999999;
        .skip{
            color: #0095FF;
            margin-left:10px;
            cursor:pointer; 
        }
    }
}
.inputcontent{
    width:98%;
    margin: 0 auto;
    height: 80px;
    position: relative;
    padding-top:21px;
    box-sizing: border-box; 
    .iconSearch{
        position: absolute;
        left: 277px;
        top:30px;
        width:20px;
        height: 20px;
        background-image: url('./image/搜索.png') ;
        background-repeat: no-repeat;
        cursor:pointer; 
    }
    .inSearch{
        width:308px;
        height:40px;
    }
}
.tablesize{
    width:98%;
    margin: 0 auto;
}
.block{
    text-align: right;
    margin:28px 20px 0 0; 
}
</style>
